<div class="text-center p-2" style="overflow: auto">
    <small>
        <span class="bg-dark text-white p-1">待办中</span><span class="bg-secondary text-white px-2 py-1 mr-2">{{summary.created}}</span>
        <span class="bg-dark text-white p-1">开发中</span><span class="bg-info text-white px-2 py-1 mr-2">{{summary.underway}}</span>
        <span class="bg-dark text-white p-1">测试中</span><span class="bg-primary text-white px-2 py-1 mr-2">{{summary.testing}}</span>
        <span class="bg-dark text-white p-1">已完成</span><span class="bg-success text-white px-2 py-1 mr-2">{{summary.finished}}</span>
    </small>
    <p style="margin: 10px 0 4px 0; font-size: .4em;">
        <i class="fa fa-exclamation-circle text-danger mx-1"></i>滞后了<i class="fa fa-square ml-2 mr-1" style="color: rgba(140, 136, 136, .25)"></i>节假日
    </p>

    <div id="gantt-view" style="height: calc(100vh - 200px);"></div>
</div>

<script type='text/javascript'>
var gantt_data = $.parseJSON('{*gantt_data*}');
var gantt_holidays = $.parseJSON('{*holidays*}');

function create_gantt(data, holidays) {
    $('#gantt-view').gantt({
        data: data,
        holidays: holidays,
        onclick: function(task) {
            open_task(task.id);
        }
    });
}

function filter_task_by_assigned(elem) {
    var user_id = $(elem).val();
    if (user_id == '-1') {
        create_gantt(gantt_data, gantt_holidays);
    } else {
        var filtered = [];
        for (var i = 0; i < gantt_data.length; ++i) {
            var one = gantt_data[i];
            if (user_id == one.owner_id) filtered.push(one);
        }
        create_gantt(filtered, gantt_holidays);
    }
}

create_gantt(gantt_data, gantt_holidays);
</script>